<template>
  <div>
    <div class="brief_introduction">
      <div class="movie_dra_title">
            <span>简介</span>
            <span v-if="isShow" @tap="changeDra">展开&nbsp;<i class="el-icon-arrow-down"></i></span>
            <span v-else @tap="changeDra">收起&nbsp;<i class="el-icon-arrow-up"></i></span>
      </div>
      <div class="movie_dra" :class="{wrper:isShow}">{{movie.dra}}</div>
    </div>
    <div>
      <div class="movie_dra_title">
            <span>剧照</span>
            <span >全部{{movie.photos.length}}张&nbsp;<i class="el-icon-arrow-right"></i></span>
           
      </div>
      <div class="photos">
           <img v-for="item in movie.photos" :key="item" :src="item.replace('w.h', '140.93')" alt="">
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true
    };
  },
  props: ["movie"],
  methods: {
    changeDra() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style scoped>
.brief_introduction {
  font-size: 12px;
  color: #fff;
  padding: 20px 0;
}
.movie_dra_title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.movie_dra_title span:first-child {
  font-size: 16px;
  font-weight: bold;
  color: #fff
}
.movie_dra_title span:last-child {
  font-size: 12px;
  color: #fff;
  opacity: 0.6;
  text-align: right;
}
.movie_dra {
  padding-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-height: 20px;
}
.wrper {
  -webkit-line-clamp: 3;
  transition: all 0.5s;
}
.photos{
    width: 100%;
    height: 93px;
    display: flex;flex-direction: row;
    overflow-x: scroll;
    margin-top: 10px
}
.photos img{
    margin-right: 5px;
}
</style>